<template>
    <div>
        <TopBar title="设备详情" iconshow></TopBar>
        <div style="position: relative; top: 20px; height: 700px; overflow: scroll">
            <div>
                <p>{{ id }}</p>
                <strong>{{ name }}</strong>
                <hr style="width: 300px">
            </div>
            <img
                src="https://ts1.cn.mm.bing.net/th/id/R-C.1c6c41230d9af3c3cb98cfa69633b0f1?rik=woU7i1%2byI8ifxA&riu=http%3a%2f%2fwww.smt66.com%2fUploadFiles%2fOthers%2f201809301417068688816.jpg&ehk=c1wIOdPYImXv%2fFcon6FMQhIJjpF%2fTJNv46lYdqlFdfI%3d&risl=&pid=ImgRaw&r=0"
                class="image">
            <div>
                <p style="color: #82ff00">设备介绍：</p>
                <p style="width: 350px; margin: 0 auto">本设备为步进电机，它是一种将电脉冲转化为角位移的执行机构。
                    当步进驱动器接收到一个脉冲信号，它就驱动步进电机按设定的方向转动一个固定的角度（及步进角）。
                    您可以通过控制脉冲个数来控制角位移量，从而达到准确定位的目的；
                    同时您可以通过控制脉冲频率来控制电机转动的速度和加速度，从而达到准确定位的目的；
                    同时您可以通过控制脉冲频率来控制电机转动的速度和加速度，从而达到调速的目的。</p>
            </div>
            <hr style="width: 350px">
            <el-link type="primary" style="line-height:30px" @click="jumpTo">对应工单</el-link>
            <br>
            <el-link type="primary" style="line-height:30px" @click="details">查看历史和实时数据</el-link>
        </div>

    </div>
</template>

<script>
import Vue from 'vue';
import {Notify} from 'vant';
// 全局注册
Vue.use(Notify);
import TopBar from "@/components/TopBar";

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Device",
    components: {
        TopBar,
    },
    data() {
        return {
            id: '',  //设备id
            name: '',
        }
    },
    methods: {
        details() {
            // console.log('查看历史和实时数据')
            this.$router.push({
                path: '/deviceData',
                query: {
                    deviceId: this.id
                }
            })
        },

        jumpTo() {
            // console.log('跳转对应工单')
            const sheetId = this.$store.getters.getDeviceById(this.id).sheetId
            if(!sheetId) Notify('无对应工单\n请上报')
            else this.$router.push({
                path: '/sheetDetails',
                query: {
                    sheetId
                }
            })
            // this.$router.push()
            // Notify('无对应工单\n请上报')
        }
    },

    mounted() {
        // console.log(this.$route)
        this.id = this.$route.query.id
        this.name = this.$route.query.name
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.image {
    width: 100%;
    /*background: #f2f2f2;*/
    display: flex;
    justify-content: center;
    align-items: center;

    .image {
        max-width: 100%;
        max-height: 700px;
    }
}
</style>
